@charset "UTF-8";
/*!
 * Canvas v1.1.0
 * © 2015 InFaNg All Rights Reserved.
 * Licensed under the GNU GENERAL PUBLIC LICENSE - https://github.com/InFaNg/Canvas/blob/master/LICENSE
 */
.appear{
  -webkit-animation: appear 2s linear;
  -moz-animation: appear 2s linear;
          animation: appear 2s linear;
}
.disappear{
  -webkit-animation: disappear 2s linear;
  -moz-animation: disappear 2s linear;
          animation: disappear 2s linear;
}
.appear-top {
  -webkit-animation: appear-top 2s linear;
  -moz-animation: appear-top 2s linear;
          animation: appear-top 2s linear;
}
.disappear-top {
  -webkit-animation: disappear-top 2s linear;
  -moz-animation: disappear-top 2s linear;
          animation: disappear-top 2s linear;
}
.appear-right {
  -webkit-animation: appear-right 2s linear;
  -moz-animation: appear-right 2s linear;
          animation: appear-right 2s linear;
}
.disappear-right {
  -webkit-animation: disappear-right 2s linear;
  -moz-animation: disappear-right 2s linear;
          animation: disappear-right 2s linear;
}
.appear-bottom {
  -webkit-animation: appear-bottom 2s linear;
  -moz-animation: appear-bottom 2s linear;
          animation: appear-bottom 2s linear;
}
.disappear-bottom {
  -webkit-animation: disappear-bottom 2s linear;
   -moz-animation: disappear-bottom 2s linear;
          animation: disappear-bottom 2s linear;
}
.appear-left {
  -webkit-animation: appear-right 2s linear;
  -moz-animation: appear-right 2s linear;
          animation: appear-right 2s linear;
}
.disappear-left {
  -webkit-animation: disappear-right 2s linear;
  -moz-animation: disappear-right 2s linear;
          animation: disappear-right 2s linear;
}
.appear-rotate {
  -webkit-animation: appear-rotate 2s linear;
  -moz-animation: appear-rotate 2s linear;
          animation: appear-rotate 2s linear;
}
.disappear-rotate {
  -webkit-animation: disappear-rotate 2s linear;
  -moz-animation: disappear-rotate 2s linear;
          animation: disappear-rotate 2s linear;
}
.animation-translate-x {
  -webkit-animation: translate-x 3s linear infinite;
  -moz-animation: translate-x 3s linear infinite;
          animation: translate-x 3s linear infinite;
 }
.animation-translate-y {
  -webkit-animation: translate-y 3s linear infinite;
  -moz-animation: translate-y 3s linear infinite;
          animation: translate-y 3s linear infinite;
}
.animation-rotate {
  -webkit-animation: rotate 3s linear infinite;
  -moz-animation: rotate 3s linear infinite;
          animation: rotate 3s linear infinite;
}

@-webkit-keyframes appear {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes appear {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes disappear {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes disappear {
0% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes appear-top {
0% {
  opacity: 0;
  transform: translate(0,100%);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@keyframes appear-top {
0% {
  opacity: 0;
  transform: translate(0,100%);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@-webkit-keyframes disappear-top {
0% {
  opacity: 1;
  transform: none
  }
100% {
  opacity: 0;
  transform: translate(0,100%);
  }
}
@keyframes disappear-top {
0% {
  opacity: 1;
  transform: none
  }
100% {
  opacity: 0;
  transform: translate(0,100%);
  }
}
@-webkit-keyframes appear-right {
0% {
  opacity: 0;
  transform: translate(100%,0);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@keyframes appear-right {
0% {
  opacity: 0;
  transform: translate(100%,0);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@-webkit-keyframes disappear-right {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: translate(100%,0);
  }
}
@keyframes disappear-right {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: translate(100%,0);
  }
}
@-webkit-keyframes appear-bottom {
0% {
  opacity: 0;
  transform: translate(0,-100%);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@keyframes appear-bottom {
0% {
  opacity: 0;
  transform: translate(0,-100%);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@-webkit-keyframes disappear-bottom {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: translate(0,-100%);
  }
}
@keyframes disappear-bottom {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: translate(0,-100%);
  }
}
@-webkit-keyframes appear-left {
0% {
  opacity: 0;
  transform: translate(-100%,0);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@keyframes appear-left {
0% {
  opacity: 0;
  transform: translate(-100%,0);
  }
100% {
  opacity: 1;
  transform: none;
  }
}
@-webkit-keyframes disappear-left {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: translate(-100%,0);
  }
}
@keyframes disappear-left {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: translate(-100%,0);
  }
}
@-webkit-keyframes appear-rotate {
0% {
  opacity: 0;
  transform: rotate(360deg);
  }
100% {
  opacity: 1;
  transform: rotate(0deg);
  }
}
@keyframes appear-rotate {
0% {
  opacity: 0;
  transform: rotate(360deg);
  }
100% {
  opacity: 1;
  transform: rotate(0deg);
  }
}
@-webkit-keyframes disappear-rotate {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: rotate(360deg);
  }
}
@keyframes disappear-rotate {
0% {
  opacity: 1;
  transform: none;
  }
100% {
  opacity: 0;
  transform: rotate(360deg);
  }
}
@-webkit-keyframes translate-x {
25%  {transform: translate(25px,0);}
75% {transform: translate(-25px,0);}
}
@keyframes translate-x {
25%  {transform: translate(25px,0);}
75% {transform: translate(-25px,0);}
}
@-webkit-keyframes translate-y {
25%  {transform: translate(0,25px);}
75% {transform: translate(0,-25px);}
}
@keyframes translate-y {
25%  {transform: translate(0,25px);}
75% {transform: translate(0,-25px);}
}
@-webkit-keyframes rotate {
33% {transform: rotate(5deg);}
66% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}
@keyframes rotate {
33% {transform: rotate(5deg);}
66% {transform: rotate(-5deg);}
100% {transform: rotate(0deg);}
}
